{% load static %}
<head>
    <link rel='stylesheet preload' href="{% static 'css/user1.css' %}" type='text/css' media='all'/>

    <style>
* {
 margin: 0;
 padding: 0;
}
body {
 font: 12px/1.125 Microsoft YaHei;
 background: #fff;
}
ul, li {
 list-style: none;
}
a {
 text-decoration: none;
}
.ani {
 transition: all .3s;
}
.wrap {
 width: 300px;
 text-align: center;
 margin:0 auto;
}
.inner {
 padding: 15px;
}
.clearfix {
 overflow: hidden;
 _zoom: 1;
}
.none {
 display: none;
}
#slider {
 position: relative;
 background-color: #e8e8e8;
 width: 300px;
 height: 34px;
 line-height: 34px;
 text-align: center;
}
#slider .handler {
 position: absolute;
 top: 0px;
 left: 0px;
 width: 40px;
 height: 32px;
 border: 1px solid #ccc;
 cursor: move;
}
.handler_bg {
 background: #fff
 url("")
 no-repeat center;
}
.handler_ok_bg {
 background: #fff
 url("")
 no-repeat center;
}
#slider .drag_bg {
 background-color: #7ac23c;
 height: 34px;
 width: 0px;
}
#slider .drag_text {
 position: absolute;
 top: 0px;
 width: 300px;
 -moz-user-select: none;
 -webkit-user-select: none;
 user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
}
.unselect {
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
}
.slide_ok {
 color: #fff;
}
 </style>
</head>
<div class="main">
    <div style="text-align: center;">
    <h2>登陆</h2>
    </div>
    <div class="row">

        <form class="form-signin" action="{% url 'user:login' %}" method="post">
            {% csrf_token %}
            <div>
                <img src="{% static 'user/img/user.png' %}" height="20" width="20" alt="">
                <input placeholder="邮箱" type="text" value="{{email}}" name="email"
                       id="email">
                <div class="login-error">
                    {{error_msg.email}}
                </div>
            </div>
            <div>
                <img src="{% static 'user/img/password.png' %}" height="20" width="20" alt="">
                <input class="input-prepend restyle" value="{{password}}" placeholder="密码" type="password"
                       name="password"
                       id="password">
                <div class="login-error"></div>
                <div class="login-error">
                    {% if error_msg.login %}
                    {{error_msg.login}}
                    {% else %}
                    {{error_msg.password}}
                    {{error_msg.valid_code}}
                    {% endif %}
                </div>

            </div>
            <div>
                <!--滑动验证-->
                <div class="wrap" style="margin: 10px auto 10px">
                    <div id="slider">
                        <div class="drag_bg"></div>
                        <div class="drag_text" onselectstart="return false;"
                             unselectable="on">拖动滑块验证
                        </div>
                        <div id="sliderDrag" class="handler handler_bg"></div>
                    </div>
                </div>
                <input type="hidden" id="valid_code" name="valid_code" value="">
                <!--滑动验证结束-->
            </div>
            <div>
                <button class="sign-up-button" type="submit">登陆</button>
            </div>
        </form>
    </div>
</div>


<script type="text/javascript" src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script type="text/javascript">
$('#sliderDrag').on('mouseleave',(function() {
   if($(".drag_bg").width()<($(".wrap").width()-$("#sliderDrag").width()-10)){
        console.log('验证失败'+$(".drag_bg").width());
        return false;
     }else{
        $("#valid_code").val("success");
        console.log('验证成功');
    }
}));

 function login() {
 if($(".drag_bg").width()<260){
    alert('验证失败');
      return false;
     }else{
    alert('验证成功');
    }
 }


</script>
<script>
 (function(window, document, undefined) {
 var dog = {//声明一个命名空间，或者称为对象
  $ : function(id) {
  return document.querySelector(id);
  },
  on : function(el, type, handler) {
  el.addEventListener(type, handler, false);
  },
  off : function(el, type, handler) {
  el.removeEventListener(type, handler, false);
  }
 };
 //封装一个滑块类
 function Slider() {
  var args = arguments[0];
  for ( var i in args) {
  this[i] = args[i]; //一种快捷的初始化配置
  }
  //直接进行函数初始化，表示生成实例对象就会执行初始化
  this.init();
}
Slider.prototype = {
  constructor : Slider,
  init : function() {
  this.getDom();
  this.dragBar(this.handler);
  },
  getDom : function() {
  this.slider = dog.$('#' + this.id);
  this.handler = dog.$('.handler');
  this.bg = dog.$('.drag_bg');
  },
  dragBar : function(handler) {
  var that = this, startX = 0, lastX = 0, doc = document, width = this.slider.offsetWidth, max = width
   - handler.offsetWidth, drag = {
   down : function(e) {
   var e = e || window.event;
   that.slider.classList.add('unselect');
   startX = e.clientX - handler.offsetLeft;
   dog.on(doc, 'mousemove', drag.move);
   dog.on(doc, 'mouseup', drag.up);
   return false;
   },
   move : function(e) {
   var e = e || window.event;
   lastX = e.clientX - startX;
   lastX = Math.max(0, Math.min(max, lastX)); //这一步表示距离大于0小于max，巧妙写法
   if (lastX >= max) {
    handler.classList.add('handler_ok_bg');
    that.slider.classList.add('slide_ok');
    dog.off(handler, 'mousedown', drag.down);
    drag.up();
   }
   that.bg.style.width = lastX + 'px';
   handler.style.left = lastX + 'px';
   },
   up : function(e) {
   var e = e || window.event;
   that.slider.classList.remove('unselect');
   if (lastX < width) {
    that.bg.classList.add('ani');
    handler.classList.add('ani');
    that.bg.style.width = 0;
    handler.style.left = 0;
    setTimeout(function() {
    that.bg.classList.remove('ani');
    handler.classList.remove('ani');
    }, 300);
   }
   dog.off(doc, 'mousemove', drag.move);
   dog.off(doc, 'mouseup', drag.up);
   }
  };
  dog.on(handler, 'mousedown', drag.down);
  }
 };
 window.S = window.Slider = Slider;
 })(window, document);
 var defaults = {
 id : 'slider'
 };
 new S(defaults);


</script>
